import React, { useEffect } from 'react'
import './ContentMyLoveMusic.scss'
import ContentMyLoveMusicHeader from './ContentMyLoveMusicHeader'
import ContentMyLoveMusicMain from './ContentMyLoveMusicMain'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'
import { getAllPlayList, getPlayListDetail } from '@/utils/api'
import { RootState } from '@/modules/RootState'

function ContentMyLoveMusic() {
  console.log('我喜欢的音乐内容')
  const musicList = useSelector((state:RootState) => state.musicList)

  const dispatch = useDispatch()
  const location = useLocation()

  console.log(location)
  useEffect(()=>{
    dispatch(getPlayListDetail(location.state.id))
    dispatch(getAllPlayList({id:location.state.id,len:location.state.len}))    
    console.log(location)
  },[location])

  return (
    <div className='ContentMyLoveMusic-contanier'>
      <ContentMyLoveMusicHeader song={musicList.playList}></ContentMyLoveMusicHeader>
      <ContentMyLoveMusicMain songs={musicList.songs} song={musicList.musicList[location.state.index]}></ContentMyLoveMusicMain>
    </div>
  )
}

export default React.memo(ContentMyLoveMusic)